<nz-card
  style="max-width: 800px; margin: 24px auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: none;"
  [nzBodyStyle]="{padding: '0'}">

  <!-- 顶部横幅 -->
  <div
    [ngClass]="getHeaderBackgroundClass()"
    style="padding: 24px;
         border-radius: 12px 12px 0 0;
         color: white;
         text-align: center;
         position: relative;
         overflow: hidden;">


  <!-- 装饰 -->
    <div style="position: absolute; top: 10px; right: 20px; opacity: 0.2;">
      <span nz-icon nzType="fire" nzTheme="fill" style="font-size: 48px;"></span>
    </div>

    <!-- 标题 -->
    <h1
      style="font-size: 28px; margin-bottom: 8px; font-weight: 600;
             display: flex; align-items: center; justify-content: center; gap: 8px;
             text-shadow: 0 2px 4px rgba(0,0,0,0.2); position: relative; z-index: 1;">
      <span nz-icon nzType="thunderbolt" nzTheme="fill"></span>
      {{ studyInfo.name || '未命名笔记' }}
    </h1>

    <!-- 日期 -->
    <p style="opacity: 0.9; margin: 0; font-size: 14px; position: relative; z-index: 1;">
      <span nz-icon nzType="calendar" nzTheme="outline"></span>
      {{ studyInfo.logDate | date: 'yyyy年MM月dd日 EEEE' }}
    </p>
  </div>

  <!-- 主体内容 -->
  <div style="padding: 24px;">
    <!-- 标签区域 -->
    <div style="margin-bottom: 24px;">
      <nz-divider nzText="标签" nzOrientation="left" style="margin-top: 0; color: #666;"></nz-divider>
      <div *ngIf="studyInfo.tagName?.length > 0; else noTags" style="display: flex; flex-wrap: wrap; gap: 8px;">
        <nz-tag *ngFor="let tag of studyInfo.tagName" nzColor="blue" style="font-size: 14px; border-radius: 12px;">
          <span nz-icon nzType="tag" nzTheme="outline"></span> {{ tag }}
        </nz-tag>
      </div>
      <ng-template #noTags>
        <p style="color: #bbb;">无标签</p>
      </ng-template>
    </div>

    <!-- 内容区域 -->
    <div>
      <nz-divider nzText="内容" nzOrientation="left" style="color: #666;"></nz-divider>
      <div
        style="padding: 16px;
               background: #fff8f6;
               border-radius: 8px;
               line-height: 1.7;
               min-height: 100px;
               border-left: 3px solid #ff4d4f;"
        [innerHTML]="studyInfo.content">
      </div>
    </div>
  </div>

  <!-- 底部按钮 -->
  <div style="padding: 16px 24px; border-top: 1px solid #f0f0f0; display: flex; justify-content: flex-end; gap: 16px;">
    <button nz-button nzType="text" nzSize="small" nzDanger>
      <span nz-icon nzType="like" nzTheme="outline"></span> 加油
    </button>
  </div>
</nz-card>
